<template>
 <div id="html_05">
 <div class="nav"> 
    <van-nav-bar title="比郎" left-text="返回" left-arrow
         @click-left="onClickLeft"
             @click-right="onClickRight"
    >
    <template #right>
          <van-icon name="ellipsis" size="18" />
    </template>
    </van-nav-bar>
 </div>
  <div class="Box">
    <div class="SBox">
        <!-- 图片一 -->
        <div class="topPhoto">
            <img src="../assets/images/h5页面2/h5页面x2_02.png" alt="">
        </div>
        <!-- 头像 -->
        <div class="headPhoto">
            <img src="../assets/images/h5页面2/h5页面x2_03.png" alt="">
            <p> VICKIN_HRO <br> 感 受 比 朗 定 制 的 独 特 魅 力 </p>
            <p> 做 工 精 美，优 质 布 料，服 务 "<br>"! 态 度 超 棒 </p>
        </div>
        <!-- 商品图片/用户晒图 -->
        <div class="proPhoto">
            <!-- 商品图 -->
            <ul class="pictures">
                <li><img src="../assets/images/h5页面2/h5页面_6_03.png" alt=""></li>
                <li><img src="../assets/images/h5页面2/h5页面_6_03.png" alt=""></li>
                <li><img src="../assets/images/h5页面2/h5页面_6_03.png" alt=""></li>
                <p>产品图</p>
            </ul>
            <!-- 用户晒图 -->
            <ul class="pictures">
                <li><img src="../assets/images/h5页面2/h5页面_6_03.png" alt=""></li>
                <li><img src="../assets/images/h5页面2/h5页面_6_03.png" alt=""></li>
                <li><img src="../assets/images/h5页面2/h5页面_6_03.png" alt=""></li>
                <li><img src="../assets/images/h5页面2/h5页面_6_03.png" alt=""></li>
                <p>用户晒图</p>
            </ul>
        </div>
        <!-- 圆圈领取 -->
        <div class="claim">
            <img src="../assets/images/h5页面4/h5页面x4_03.png" alt="">
            <div>
                <p class="title">点击领取</p>
                <p class="word">价值200元体验卷</p>
            </div>
        </div>
    </div>
    <div class="down">
        <img src="../assets/images/h5页面4/h5页面x4_03_03.png" alt="">
    </div>
  </div>
 </div>
</template>
 
<script>
     export default {
      data(){
          return{}
      },
         methods: {
    onClickLeft() {
      
      this.$router.go(-1)
    },
    onClickRight() {
      
    },
  },
    }
</script>

<style lang="less" scoped>
// 大背景
.Box{
    width: 100%;
    height: 100%;
    padding-top: 90px;
    box-sizing: border-box;
    background: url("../assets/images/h5页面2/background02.png");
    background-size: 100% 100%;
    position: absolute;
    z-index: -1;
    overflow: hidden;
}
.SBox{
    width: 90%;
    height: 100%;
    background: url("../assets/images/h5页面2/background02.png");
    background-size: 100% 100%;
    background: rgba(0, 0, 0, 0.5);
    position: relative;
    margin: 20px auto;
    border-radius: 10px;
    overflow: hidden;
}
// 图片一
.topPhoto{
    width: 100%;
    img{
        width: 100%;
    }
}
// 头像
.headPhoto{
    direction: rtl;
    font-size: 24px;
    color: #fff;
    position: absolute;
    right: 34px;
    top: 108px;
    img{
     width: 140px;
     height: 140px;
    }
    p{
     line-height: 30px;
     margin-top: 15px;
    }
}
// 商品图片/用户晒图
.proPhoto{
    // position: relative;
    top: -90px;
    // left: 40px;
    margin-left: 20px;
    // 商品图
    .pictures{
        li{
            width: 150px;
            height: 150px;
            float: left;
            margin-right: 10px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        p{
            width: 100%;
            line-height: 70px;
            font-size: 20px;
            float: left;
            color: #fff;
        }
    }
}
// 圆圈领取
.claim{
    width: 100%;
    position: relative;
    text-align: center;
    img{
        width: 200px;
    }
    div{
        position: relative;
        top: -150px;
        line-height: 1;
        transform:scale(0.7);
        .title{
            font-size: 24px;
        }
        .word{
            font-size: 14px;
        }
    }
}
.down{
    width: 100%;
    position:absolute;
    bottom: 0;
    img{
        width: 100%;
    }
}
</style>
